<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <style>
    [v-cloak] {
      display: none;
    }

    .red {
      background-color: red;
    }

    .green {
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- <p>{{username}}</p> -->
    <!-- 属性上使用数据 -->
    <!-- <p v-bind: id="username">测试一下</p> -->

    -----------------------------------------------------

    <!-- v-cloak
    v-cloak: 当页面中数据赋值前, 此时有 v-cloak属性, 当页面数据赋值后, v-cloak 属性自动消失, 一般配合style 属性使用
    -->
    <!-- <p>{{brotherWife}}</p> -->


    -----------------------------------------------------
    <!-- v-text -->
    <!-- v-text 用于渲染文本内容, 等同于{{}}, 但是不同于插值表达式, 没有闪现效果 -->
    <!-- <p v-text="username"></p>
    <p v-text="link"></p>  -->
    <!-- 不能点击 -->

    -------------------------------------------------
    <!-- v-html -->
    <!-- 将内容使用innerHTML 添加， 没有闪现效果， 可以识别 标签
      缺点： 由于可以解析数据中 的html 标签， 所以容易发生 跨站站脚本攻击 xss

      解决方法:  可以通过正则表达式过滤掉用户的非法输入
      <和>分别匹配HTML标签的左右尖括号。
      \/?匹配斜杠（用于闭合标签）的可选出现。
      [^>]*匹配除了右尖括号以外的任意字符，*表示匹配0个或多个。
      /g表示全局匹配，即匹配所有符合条件的结果。
      -->

    <!-- <p v-html="filter(link)"></p> -->


    -----------------------------------------------------
    <!-- v-once -->
    <!-- 只渲染一次, 数据更新不再渲染 -->

    --------------------------------------------------------
    <!-- v-pre -->
    <!-- 绑定该指令的标签数据不会渲染 -->

    --------------------------------------------------------
    <!-- v-bind -->
    <!-- 主要用来绑定标签的动态属性, 简写语法: v-bind: 属性名='变量'=> :属性名='变量' -->


    ----------------------------------------------------------
    <!-- v-on -->
    <!-- 该指令主要用于绑定事件 -->
    <!-- 语法: v-on:  事件名= '事件执行函数' 简写@事件名= '执行函数' -->





  </div>
</body>

</html>
<script>
  const { createApp } = Vue;

  const vm = createApp({
    data() {
      return {
        username: '高启强',
        brotherWife: '陈书婷',
        link: '<a href="https://www.baidu.com">百度一下</a>',

      }
    },

    methods: {
      filter(str) {
        var reg = /<\/?[^>]*>/g;
        str = str.replace(reg, '')
        return str
      }
    }
  }).mount('#app')
</script>